<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-70-t </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-animate-elem-70-t.html">Full version</a>, <a href="basic-animate-elem-70-t.html">Basic version</a>, <a href="tiny-animate-elem-70-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a></p>
 <p>
				<a href="tiny-animate-elem-69-t.html">animate-elem-69-t ←</a> 
				<a href="tiny-index.html">index</a>
				<a href="tiny-animate-elem-77-t.html">→ animate-elem-77-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>animate-elem-70-t</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=80 height=60>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-70-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=80 height=60 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-70-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of animate-elem-70-t" src="../png/tiny-animate-elem-70-t.png" width="80" height="60"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
            <p>
                This tests performs basic tests on the animation's SMIL fill attribute.
            </p>
            <p>
                On the first row, the &lt;set&gt; animation has its dur
                attribute set to '1s' and its begin attribute set to '0s;
                firstSet.end + 1s'. The fill attribute is unspecified, so the
                the effect is as if it was set to 'remove', because 'remove' is
                the default value for fill.

                Consequently, the first interval is (0s &lt;= t &lt; 1s), the second is 
                (2s &lt;= t &lt; 3s), the third, (4s &lt;= t &lt; 5s) etc.. The red rectangle starts on the
                right position, moves to the left position for one second, moves
                to the right for 1 second, and so on.
            </p>
            <p>
                On the second row, the &lt;set&gt; animation has its dur attribute set to
                1s and its begin attribute set to '0s; firstSet.end'. The fill attribute
                is set to 'remove'. The behavior should be exactly the same as for the previous
                row, and the rectangle moves from the right position to the left position
                every second.
            </p>
            <p>
                On the third row, the &lt;set&gt; animation has its dur attribute set to
                1s and its begin attribute set to '0s; firstSet.end'. The fill attribute
                is set to 'freeze'. The first interval should be (0s &lt;= t &lt; 1s), the second (2s &lt;= t &lt; 3s),
                the third (4s &lt;= t &lt; 5s), etc. Between interval, the fill behavior should be applied,
                so the red rectangle should stay on the right position and never go to the 
                left position.
            </p>
            <p>
                On the fourth row, the &lt;set&gt; animation has its dur  attribute set to
                1s and its begin attribute set to '0s'. The fill attribute
                is set to 'freeze'. The first interval should be (0s &lt;= t &lt; 1s) and there is no
                following interval. Because of the fill behavior, the &lt;set&gt; should
                apply the last (and only) animation value after 1s. Consequently, the 
                red rectangle should stay on the right position and never go to the 
                left position.
            </p>

		</div>
<div class="linkbar"> <p>
				<a href="tiny-animate-elem-69-t.html">animate-elem-69-t ←</a>
				<a href="tiny-index.html">index</a>
				<a href="tiny-animate-elem-77-t.html">→ animate-elem-77-t</a>
						</p></div>
</body>
</html>
